<template>
  <div class="app-container">
    <el-card>
      <div class="main-title">系统日志</div>
      <!-- 查询 -->
      <div class="search-card">
        <div class="search-form">
          <el-form :model="searchForm">
            <div class="search-form-item">
              <i class="el-icon-search" />
              <span>查询：</span>
            </div>
            <div class="search-form-item">
              <el-input v-model.trim="searchForm.userName" size="medium" placeholder="操作人" />
            </div>
            <div class="search-form-item">
              <el-button size="medium" type="primary" @click='initTable()'>查询</el-button>
              <el-button size="medium" @click="resetForm">清空</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 列表区域 -->
      <el-table
        v-loading="listLoading"
        class="table-area"
        :data="tableData"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column type="index" width="180" label="序号" />
        <el-table-column prop="remark" label="日志内容" />
        <el-table-column prop="username" label="操作人" />
        <el-table-column prop="createTime" label="创建时间">
          <slot slot-scope="scope">
            {{ getFormatTime(scope.row.createTime) }}
          </slot>
        </el-table-column>
        <!--<el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button
              class="self-btn delete-btn"
              type="text"
              icon="el-icon-close"
              @click="deleteRow(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div class="page-main">
        <el-pagination
          background
          :page-size="searchForm.pageSize"
          :current-page="searchForm.pageNo"
          :hide-on-single-page="isPagination"
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import {getSystemLog} from '@/api/sysSettings/log'
import { formatTime } from '@/utils/common'
export default {
  name: 'Product',
  data() {
    return {
      tableData: [],
      listLoading: false,
      headerCellStyle() {
        return 'background-color: #f5f7fa;color: #606266'
      }, // 表格表头样式
      searchForm: {
        pageSize: 10,
        pageNo: 1
      },
      pageSize: 10,
      pageNo: 1,
      editTitle: '新增',
      type: 'add',
      dialogFormVisible: false,
      total: null,
      form: {},
      formLabelWidth: '80px',
      isPagination:true,
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    /* 格式化时间 */
    getFormatTime(time) {
      return formatTime(time, true)
    },
    // 列表初始化
    initTable() {
      getSystemLog(this.searchForm).then(res => {
        this.tableData = res.object.list
        this.total = res.object.total
        if(res.object.total > 1) {
          this.isPagination = false
        } else {
          this.isPagination = true
        }
      }).catch(() => {

      }).finally(() => {
        this.listLoading = false
      })
    },
    // 查看
    toDetal() {
      this.$router.push('/product/detail')
    },
    // 新增
    btnEdit(type, data) {
      this.form = {
        content: data.content,
        createTime: data.createTime
      }
      this.type = type
      this.dialogFormVisible = true
      if (type === 'update') {
        this.editTitle = '修改'
      } else if (type === 'add') {
        this.editTitle = '新增'
      }
    },
    // 搜索重置
    resetForm() {
      this.searchForm = { pageNo: 1, pageSize: 10 }
      this.initTable()
    },
    // 删除
    deleteRow(val) {
      this.$confirm('确定要删除吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
        })
        .catch((action) => {})
    },
 /*   search() {
      const params = {
        pageSize: 10,
        pageNo: 1,

      }
      getSystemLog().then(res => {
        this.tableData = res.object.list
        if(res.object.total > 1) {
          this.isPagination = false
          this.total = res.object.total
        } else {
          this.isPagination = true
        }
      }).catch(() => {

      }).finally(() => {
        this.listLoading = false
      })
    },*/
    // 分页
    handleCurrentChange(val) {
      const params = {
        pageNo: val,
        pageSize: this.pageSize
      }
      this.initTable(params)
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-group {
  padding: 16px 20px;
}
.table-area {
  padding: 0 20px;
}
.product-status {
  width: 58px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background: #f2fff7;
  border: 1px solid #1eb955;
  color: #1eb955;
}
.product-status.active {
  background: #f3f3f3;
  border: 1px solid #999;
  color: #999;
}

// 查询区域
.search-card {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  background-color: #FFF;
  .query-text {
    width: 80px;
  }
  .search-form {
    .search-form-item {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 6px;
    }
  }
}
</style>
